import React, { Component } from 'react'
import classNames from 'classnames'
import moment from 'moment'

export default class List extends Component {
  render() {
    const { list, active } = this.props
    const tempList = [...list]
    // 当 active 等于 hot 根据热度(id)排序，等于 time 的时候根据时间排序
    if (active === 'hot') {
      // 不能直接修改传递过来的数据
      // list.sort()
      tempList.sort((item1, item2) => item2.id - item1.id)
    } else {
      tempList.sort((item1, item2) => item2.time - item1.time)
    }
    return (
      <div className='comment-list'>
        {/* //!一定记得换成 tempList */}
        {tempList.map((item) => (
          <div key={item.id} className='list-item'>
            <div className='user-face'>
              <img className='user-head' src={item.img} alt='' />
            </div>
            <div className='comment'>
              <div className='user'>{item.author}</div>
              <p className='text'>{item.comment}</p>
              <div className='info'>
                <span className='time'>
                  {moment(item.time).format('YYYY-MM-DD HH:mm:ss')}
                </span>
                {/* <span className={`like ${item.attitude === 1 ? 'liked' : ''}`}> */}
                <span
                  className={classNames('like', {
                    liked: item.attitude === 1,
                  })}
                >
                  <i className='icon'></i>
                </span>
                <span className={`hate ${item.attitude === -1 ? 'hated' : ''}`}>
                  <i className='icon'></i>
                </span>
                <span className='reply btn-hover'>删除</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }
}
